<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="./js/data.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
  </head>

  <body>
    <div id="shopcart" class="shop-cart">
      <div class="tabs">
        <div class="border" @mouseenter="changeStyle">
          <!-- data-*表示自定义属性。 -->
          <div class="title active" data-index="0">
            全部商品
            <span class="count">{{allCount}}</span>
          </div>
          <div class="title" data-index="1">
            降价商品
            <span class="count">0</span>
          </div>
          <div class="title last" data-index="2">
            库存紧张
            <span class="count">0</span>
          </div>
          <div class="line"></div>
        </div>
      </div>

      <div class="lists">
        <div class="header">
          <ul class="clearfix">
            <li>
              <div
                class="checkItem"
                :class="{checked:shopCartCheckedAll}"
                @click="() => shopCartCheckedAll = !shopCartCheckedAll"
              ></div>
              <label>全选</label>
            </li>
            <li class="product-info">商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>金额</li>
            <li>操作</li>
          </ul>
        </div>

        <div id="shoplist" class="shoplist">
          <!-- 店铺内容及样式参考 -->
          <div class="shop" v-for="(shop,sIndex) in shopcarts" :key="shop.id">
            <div class="shop-info" v-if="shop.products.length>0">
              <div
                class="checkItem"
                :class="{checked:shop.isChecked}"
                @click="changeShopChecked(shop)"
              ></div>
              <span class="shop-tip">店铺：</span>
              <a class="shop-name" href="#">{{shop.shopName}}</a>
              <a href="#" class="wangwang">旺旺</a>
            </div>
            <div class="products">
              <div
                class="item"
                v-for="(product,pIndex) in shop.products"
                :key="product.productId"
                :class="{odd: pIndex % 2 === 0 ? false:true}"
              >
                <div class="select-logo">
                  <div
                    class="checkItem"
                    :class="{'checked':product.isChecked}"
                    @click="() => product.isChecked = !product.isChecked"
                  ></div>
                  <img :src="product.topImg" alt="产品logo" />
                </div>
                <div class="product-detail">
                  <div class="left">
                    <a href="#" class="product-name">
                      {{product.productName}}
                    </a>
                    <div class="logos">
                      <a href="#" class="card">信用卡</a>
                      <a href="#" class="service">保障服务</a>
                      <a href="#" class="order">订单险</a>
                      <a href="#" class="seven">7天无理由</a>
                    </div>
                  </div>
                  <div class="right">
                    <p v-html="product.spec"></p>
                  </div>
                </div>
                <div class="price">
                  <p class="market-price">￥{{product.marketPrice}}</p>
                  <p class="real-price">￥{{product.price}}</p>
                </div>
                <div class="count">
                  <span class="sub" @click="changeProductCount(product,'sub')"
                    >-</span
                  >
                  <span class="input"
                    ><input type="text" :value="product.count"
                  /></span>
                  <span class="add" @click="changeProductCount(product,'add')"
                    >+</span
                  >
                </div>
                <div class="amount">
                  ￥{{(product.price* product.count).toFixed(2)}}
                </div>
                <div class="delete">
                  <a
                    href="#"
                    @click="deleteItem(sIndex,pIndex)"
                    class="deleteImg"
                  ></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="operate">
        <div class="left">
          <input type="checkbox" class="select-all-footer" />
          <a href="javascript:void(0);" @click="deleteChecked">删除</a>
        </div>

        <div class="right">
          <div>
            已选择商品<span class="selected-count">{{finalCount}}</span>件
          </div>
          <div class="amount">
            合计（不含运费）：
            <span class="sum">￥{{finalPrice.toFixed(2)}}</span>
          </div>
          <a href="javascript:void(0);" class="settle">结算</a>
        </div>
      </div>
    </div>
    <script>
      // 199010120唐梓铭
      Vue.createApp({
        data() {
          return {
            shopcarts: shopcarts,
            count: 0,
            checked: false,
          };
        },
        watch: {
          shopcarts: {
            handler(newValue, oldValue) {
              newValue.map((shop) => {
                shop.isChecked = shop.products.every(
                  (p) => p.isChecked === true
                );
              });
            },
            deep: true,
          },
        },
        mounted() {
          this.shopcarts.map((shop) => {
            shop.products.map((product) => {
              product.isChecked = !!product.isChecked;
            });
          });
        },
        computed: {
          // 全部商品数量
          allCount() {
            let count = 0;
            this.shopcarts.map((shop) => {
              shop.products.map((p) => {
                count += p.count;
              });
            });
            return count;
          },
          // 总价格
          finalPrice() {
            let res = 0;
            this.shopcarts.map((shop) => {
              shop.products.map((product) => {
                if (product.isChecked) {
                  res += product.price * product.count;
                }
              });
            });
            return res;
          },
          // 总数量
          finalCount() {
            let count = 0;
            this.shopcarts.map((shop) => {
              shop.products.map((product) => {
                if (product.isChecked) {
                  count += product.count;
                }
              });
            });
            return count;
          },
          // 计算全选
          shopCartCheckedAll: {
            get() {
              return this.shopcarts.every((shop) => {
                return shop.isChecked === true;
              });
            },
            set(newValue) {
              this.shopcarts.map((shop) => {
                shop.isChecked = newValue;
                shop.products.map((product) => {
                  product.isChecked = newValue;
                });
              });
            },
          },
        },
        methods: {
          changeStyle() {
            // 实现头部的动画
            var titles = document.querySelectorAll(".title");
            var line = document.querySelector(".line");
            for (let i = 0; i < titles.length; i++) {
              titles[i].addEventListener("mouseenter", function () {
                for (var j = 0; j < titles.length; j++) {
                  titles[j].classList.remove("active");
                }
                this.classList.add("active");
                line.style.left = i * line.offsetWidth + "px";
              });
            }
          },
          // 单选商品
          selectProductItem(product) {
            product.isChecked
              ? (this.count += product.count)
              : (this.count -= product.count);
          },
          // 改变单个商品数量
          changeProductCount(product, type) {
            if (type === "add") {
              product.count++;
            } else {
              product.count > 0 ? product.count-- : product.count;
            }
          },
          // 删除商品
          deleteItem(sIndex, pIndex) {
            confirm("真的要删除吗？") &&
              this.shopcarts[sIndex].products.splice(pIndex, 1);
          },
          // 删除选中商品
          deleteChecked() {
            const res = confirm("真的要删除吗？");
            if (res) {
              this.shopcarts.map((shop) => {
                const set = new Set(shop.products);
                shop.products.map((p, index) => {
                  if (p.isChecked) {
                    set.delete(p);
                  }
                });
                shop.products = Array.from(set);
              });
            } else {
              return;
            }
          },
          // 修改商铺全选
          changeShopChecked(shop) {
            shop.isChecked = !shop.isChecked;
            shop.products.map((p) => {
              p.isChecked = shop.isChecked;
            });
          },
        },
      }).mount("#shopcart");
    </script>
  </body>
</html>
